{#<!DOCTYPE html>#}
{#<html lang="zh-CN">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <meta name="viewport" content="width=device-width, initial-scale=1.0">#}
{#    <title>隧道轮廓统计信息</title>#}
{#    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">#}
{#    <style>#}
{#        body {#}
{#            background-color: #f8f9fa;#}
{#        }#}
{#        .container {#}
{#            margin-top: 50px;#}
{#            padding-bottom: 30px;#}
{#        }#}
{#        .chart-container {#}
{#            text-align: center;#}
{#            margin-top: 40px;#}
{#            background: white;#}
{#            padding: 20px;#}
{#            border-radius: 10px;#}
{#            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);#}
{#        }#}
{#        .chart-title {#}
{#            font-weight: bold;#}
{#            margin-bottom: 15px;#}
{#            font-size: 1.2rem;#}
{#            color: #333;#}
{#        }#}
{#        .statistics-list {#}
{#            margin-top: 30px;#}
{#            padding: 20px;#}
{#            background: white;#}
{#            border-radius: 10px;#}
{#            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);#}
{#        }#}
{#        .statistics-list h4 {#}
{#            color: #007bff;#}
{#        }#}
{#        .statistics-list ul {#}
{#            list-style-type: none;#}
{#            padding-left: 0;#}
{#        }#}
{#        .statistics-list ul li {#}
{#            padding: 8px 0;#}
{#            border-bottom: 1px solid #eaeaea;#}
{#        }#}
{#        .statistics-list ul li:last-child {#}
{#            border-bottom: none;#}
{#        }#}
{#        .chart-container img {#}
{#            max-width: 100%;#}
{#            height: auto;#}
{#            border-radius: 8px;#}
{#            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);#}
{#        }#}
{#        footer {#}
{#            margin-top: 50px;#}
{#            padding: 10px 0;#}
{#            background: #007bff;#}
{#            color: white;#}
{#            text-align: center;#}
{#            border-top-left-radius: 10px;#}
{#            border-top-right-radius: 10px;#}
{#        }#}
{#    </style>#}
{#</head>#}
{#<body>#}
{##}
{#<nav class="navbar navbar-expand-lg navbar-light bg-light">#}
{#    <div class="container-fluid">#}
{#        <a class="navbar-brand" href="#">统计报表系统</a>#}
{#        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">#}
{#            <span class="navbar-toggler-icon"></span>#}
{#        </button>#}
{#        <div class="collapse navbar-collapse" id="navbarNav">#}
{#            <ul class="navbar-nav">#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="{% url 'geological_statistics' %}">掌子面统计</a>#}
{#                </li>#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="{% url 'excavation_statistics' %}">超欠挖计算统计</a>#}
{#                </li>#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="{% url 'diagnosis_statistics' %}">超欠挖诊断统计</a>#}
{#                </li>#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="{% url 'tunnel_statistics' %}">隧道轮廓统计</a>#}
{#                </li>#}
{#            </ul>#}
{#        </div>#}
{#    </div>#}
{#</nav>#}
{##}
{#<div class="container">#}
{#    <h2 class="text-center mb-4">#}
{#        {% if is_admin %}#}
{#            <span class="badge bg-primary">全局</span> 隧道轮廓统计报表#}
{#        {% else %}#}
{#            <span class="badge bg-success">我的</span> 隧道轮廓统计报表#}
{#        {% endif %}#}
{#    </h2>#}
{##}
{#    <!-- 统计指标 -->#}
{#    <div class="statistics-list">#}
{#        <h4>统计信息</h4>#}
{#        <ul class="list-group">#}
{#            <li class="list-group-item d-flex justify-content-between align-items-center">#}
{#                上传记录数#}
{#                <span class="badge bg-primary">{{ statistics.record_count }}</span>#}
{#            </li>#}
{#            <li class="list-group-item d-flex justify-content-between align-items-center">#}
{#                平均轮廓半径#}
{#                <span class="badge bg-success">{{ statistics.radius_avg|default:"暂无数据" }}</span>#}
{#            </li>#}
{#            <li class="list-group-item d-flex justify-content-between align-items-center">#}
{#                平均轮廓粗糙度#}
{#                <span class="badge bg-info">{{ statistics.roughness_avg|default:"暂无数据" }}</span>#}
{#            </li>#}
{#            <li class="list-group-item d-flex justify-content-between align-items-center">#}
{#                最大纵向变化#}
{#                <span class="badge bg-warning text-dark">{{ statistics.max_longitudinal_variation|default:"暂无数据" }}</span>#}
{#            </li>#}
{#        </ul>#}
{#    </div>#}
{##}
{#    <!-- 图表部分 -->#}
{#    <div class="chart-container">#}
{#        <h4 class="chart-title">轮廓半径分布</h4>#}
{#        {% if charts.radius_distribution %}#}
{#            <img src="data:images/png;base64,{{ charts.radius_distribution }}" alt="轮廓半径分布">#}
{#        {% else %}#}
{#            <p class="text-muted">暂无数据</p>#}
{#        {% endif %}#}
{#    </div>#}
{##}
{#    <div class="chart-container">#}
{#        <h4 class="chart-title">轮廓粗糙度分布</h4>#}
{#        {% if charts.roughness_distribution %}#}
{#            <img src="data:images/png;base64,{{ charts.roughness_distribution }}" alt="轮廓粗糙度分布">#}
{#        {% else %}#}
{#            <p class="text-muted">暂无数据</p>#}
{#        {% endif %}#}
{#    </div>#}
{##}
{#    <div class="chart-container">#}
{#        <h4 class="chart-title">纵向变化随时间趋势</h4>#}
{#        {% if charts.longitudinal_variation_trend %}#}
{#            <img src="data:images/png;base64,{{ charts.longitudinal_variation_trend }}" alt="纵向变化趋势">#}
{#        {% else %}#}
{#            <p class="text-muted">暂无数据</p>#}
{#        {% endif %}#}
{#    </div>#}
{#</div>#}
{##}
{#<footer>#}
{#    © 2025 隧道轮廓统计系统 - 全部数据实时统计#}
{#</footer>#}
{##}
{#<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>#}
{#</body>#}
{#</html>#}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隧道轮廓统计信息</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        body {
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .left-sidebar {
            width: 200px;
            background: #343a40;
            color: white;
            padding-top: 20px;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .left-sidebar .nav-link {
            color: white;
            margin: 10px 0;
        }

        .left-sidebar .nav-link:hover {
            color: #007bff;
        }

        .left-sidebar h3 {
            color: white;
            text-align: center;
            margin-bottom: 30px;
        }

        .right-content {
            margin-left: 200px;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            grid-template-rows: auto auto;
            width: calc(100% - 200px);
            overflow-y: auto;
            flex: 1;
        }

        .chart-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            height: 100%;
        }

        .chart-title {
            font-weight: bold;
            margin-bottom: 15px;
            font-size: 1.2rem;
            color: #333;
        }

        footer {
            padding: 10px 0;
            background: #007bff;
            color: white;
            text-align: center;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            width: 100%;
        }

        @media (max-width: 768px) {
            .right-content {
                grid-template-columns: 1fr;
            }
        }

        canvas {
            width: 100% !important;
            height: auto !important;
        }
    </style>
</head>
<body>

<div class="left-sidebar">
    <h3>统计报表系统</h3>
    <nav>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'geological_statistics' %}">掌子面统计</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'excavation_statistics' %}">超欠挖计算统计</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'diagnosis_statistics' %}">超欠挖诊断统计</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'tunnel_statistics' %}">隧道轮廓统计</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'index' %}">返回</a>
            </li>
        </ul>
    </nav>
</div>

<div class="right-content">
    <div class="chart-container">
        <h4 class="chart-title">轮廓半径分布</h4>
        <canvas id="radiusChart"></canvas>
    </div>
    <div class="chart-container">
        <h4 class="chart-title">轮廓粗糙度分布</h4>
        <canvas id="roughnessChart"></canvas>
    </div>
    <div class="chart-container">
        <h4 class="chart-title">纵向变化分布</h4>
        <canvas id="variationChart"></canvas>
    </div>
    <div class="chart-container">
        <h4 class="chart-title">环形图示例</h4>
        <canvas id="doughnutChart"></canvas>
    </div>
</div>

<footer>
    © 2025 隧道轮廓统计系统 - 全部数据实时统计
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    var ctx1 = document.getElementById('radiusChart').getContext('2d');
    var radiusChart = new Chart(ctx1, {
        type: 'bar',
        data: {
            labels: ['轮廓半径'],
            datasets: [{
                label: '统计数据',
                data: [{{ statistics.avg_cr|default:0 }}],
                backgroundColor: ['#007bff'],
                borderColor: ['#0056b3'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: { beginAtZero: true },
                y: { beginAtZero: true }
            }
        }
    });

    var ctx2 = document.getElementById('roughnessChart').getContext('2d');
    var roughnessChart = new Chart(ctx2, {
        type: 'bar',
        data: {
            labels: ['轮廓粗糙度'],
            datasets: [{
                label: '统计数据',
                data: [{{ statistics.avg_rcl|default:0 }}],
                backgroundColor: ['#28a745'],
                borderColor: ['#1c7430'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: { beginAtZero: true },
                y: { beginAtZero: true }
            }
        }
    });

    var ctx3 = document.getElementById('variationChart').getContext('2d');
    var variationChart = new Chart(ctx3, {
        type: 'bar',
        data: {
            labels: ['变化值'],
            datasets: [{
                label: '纵向变化',
                data: [{{ statistics.avg_vo|default:0 }}],
                backgroundColor: 'rgba(255, 159, 64, 0.6)',
                borderColor: 'rgba(255, 159, 64, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: { beginAtZero: true }
            }
        }
    });

    var ctx4 = document.getElementById('doughnutChart').getContext('2d');
    var doughnutChart = new Chart(ctx4, {
        type: 'doughnut',
        data: {
            labels: ['轮廓半径', '轮廓粗糙度', '纵向变化'],
            datasets: [{
                data: [{{ statistics.avg_cr|default:0 }}, {{ statistics.avg_rcl|default:0 }}, {{ statistics.avg_vo|default:0 }}],
                backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)'],
                borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true
        }
    });
</script>

</body>
</html>

